import React, { useEffect } from 'react';
import { useErrors } from '../contexts/ErrorContext';
import ErrorBanner from './ErrorBanner';
// Import your other components here

const MainLayout = () => {
  const { currentError, removeError, handleExtError } = useErrors();

  // Example of how to set up a global error handler
  useEffect(() => {
    const originalConsoleError = console.error;
    
    // Override console.error to catch extension-related errors
    console.error = (...args) => {
      originalConsoleError(...args);
      
      // Check if this is an extension error
      const errorText = args.join(' ');
      if (errorText.includes('extension') || 
          errorText.includes('FAILED to register') ||
          errorText.includes('LanguageStatusItem')) {
        handleExtError(errorText);
      }
    };
    
    // Set up window error handler
    const handleWindowError = (event) => {
      if (event.error && (
          event.error.message?.includes('extension') ||
          event.error.stack?.includes('extensionHostProcess')
        )) {
        handleExtError(event.error);
        event.preventDefault(); // Prevent default error handler
      }
    };
    
    window.addEventListener('error', handleWindowError);
    
    // Clean up
    return () => {
      console.error = originalConsoleError;
      window.removeEventListener('error', handleWindowError);
    };
  }, [handleExtError]);
  
  return (
    <div className="main-layout">
      {currentError && (
        <ErrorBanner 
          error={currentError} 
          onDismiss={() => removeError(currentError.id)} 
        />
      )}
      
      {/* Your main application content */}
      <div className="app-content">
        {/* Add your app components here */}
      </div>
    </div>
  );
};

export default MainLayout;
